<!-- 组件 -->
<template>
  <div class="">
    <transition>
      <div v-if="!show" key="1" class="weather-background" :style="backgroundStyle"></div>
      <div v-if="show" key="2" class="weather-background" :style="backgroundStyle"></div>
    </transition>
  </div>
</template>

<script>
export default {
  name: '',
  props: {
    weatherType: {
      type: String,
      default: '晴',
    },
  },
  data() {
    return {
      show: true,
      backgroundPicture: 'https://s3.ax1x.com/2021/02/09/yaILPx.jpg',
      images: {
        晴: ['https://s3.ax1x.com/2021/02/09/yaIQgO.jpg'],
        云: ['https://s3.ax1x.com/2021/02/09/yaILPx.jpg'],
        雷: [
          'https://s3.ax1x.com/2021/02/09/yao9Zd.jpg',
          'https://s3.ax1x.com/2021/02/09/yaI3Ke.jpg',
          'https://s3.ax1x.com/2021/02/09/yaIlvD.jpg',
          'https://s3.ax1x.com/2021/02/09/yaIM8K.jpg',
        ],
        雨: [
          'https://s3.ax1x.com/2021/02/09/yaIsbj.jpg',
          'https://s3.ax1x.com/2021/02/09/yaIaPP.jpg',
          'https://s3.ax1x.com/2021/02/09/yaIYVA.jpg',
          'https://s3.ax1x.com/2021/02/09/yaIGbd.jpg',
          'https://s3.ax1x.com/2021/02/09/yaI8DH.jpg',
        ],
        阴: [
          'https://s3.ax1x.com/2021/02/09/yaIw28.jpg', 
          'https://s3.ax1x.com/2021/02/09/yaId8f.jpg'
        ],
        雪: [
          'https://s3.ax1x.com/2021/02/09/yaIrrQ.jpg',
          'https://s3.ax1x.com/2021/02/09/yaIDKg.jpg',
          'https://s3.ax1x.com/2021/02/09/yaI0xS.jpg',
          'https://s3.ax1x.com/2021/02/10/ywHPij.jpg',
        ],
        雾: [
          'https://s3.ax1x.com/2021/02/09/yaIcan.jpg',
          'https://s3.ax1x.com/2021/02/09/yaI6Vs.jpg',
          'https://s3.ax1x.com/2021/02/10/ywob0e.jpg',
          'https://s3.ax1x.com/2021/02/10/ywo5Sx.jpg',
        ],
        沙尘: [
          'https://s3.ax1x.com/2021/02/09/yaIg5q.jpg',
          'https://s3.ax1x.com/2021/02/10/ywH9oQ.jpg',
          'https://s3.ax1x.com/2021/02/10/ywH3S1.jpg',
        ],
        冰雹: [
          'https://s3.ax1x.com/2021/02/10/ywHFWn.jpg',
          'https://s3.ax1x.com/2021/02/10/ywHiJs.jpg',
          'https://s3.ax1x.com/2021/02/10/yw7FKK.jpg',
        ],
        霜: ['https://s3.ax1x.com/2021/02/10/ywHkzq.jpg'],
      },
      arr: {
        xue: '雪',
        lei: '雷',
        shachen: '沙尘',
        wu: '雾',
        bingbao: '冰雹',
        yun: '云',
        yu: '雨',
        yin: '阴',
        qing: '晴',
        晴: '晴',
        阴: '阴',
        多云: '云',
        小雨: '雨',
        中雨: '雨',
        大雨: '雨',
        小雪: '雪',
        中雪: '雪',
        大雪: '雪',
        霾: '雾',
      },
    };
  },
  computed: {
    backgroundStyle() {
      return 'background: url(' + this.backgroundPicture + ') 0% 0% / 100% 100% no-repeat,  0% 0% / 100%;';
    },
  },
  created() {
    this.weatherTypeClassify(this.weatherType);
  },
  watch: {
    weatherType(newValue) {
      this.weatherTypeClassify(newValue);
    },
  },
  methods: {
    weatherTypeClassify(type) {
      this.show = !this.show;
      let images = this.images[this.arr[type]];
      let index = new Date().getDate() % images.length;
      this.backgroundPicture = images[index];
    },
  },
};
</script>

<style scoped>
.weather-background {
  border-radius: 10px;
  overflow: hidden;
  filter: brightness(85%);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
/* 进入前和结束后的状态 */
.v-enter,
.v-leave-to {
  filter: brightness(60%);
}
/* 进入和离开的动画时间段 */
.v-enter-active,
.v-leave-active {
  transition: all 0.4s ease;
}
</style>
